3.09. Основные теги

ОБЯЗАТЕЛЬНОДЛЯ НОВИЧКОВНЕ ДЛЯ НОВИЧКОВВ РАЗРАБОТКЕ

Разработчику Аналитику Тестировщику
Архитектору Инженеру

Форматирование текста

HTML позволяет своими встроенными инструментами менять вид текста:

Тег	Описание
`<b>`	Жирный шрифт
`<i>`	Курсив
`<u>`	Подчёркивание
`<br>`	Перенос строки
`<hr>`	Горизонтальная линия
`<p>`	Абзац HTML (в отличие от переноса, выделяет набор данных отдельно)
`<h1>`, `<h2>`, …, `<h6>`	Заголовки. Отличаются встроенным форматированием, которое делает шрифт больше, жирнее и более выдающимся. В отличие от простого размера и формата, присваивает тексту «статус» заголовка, что позволяет работать с объектом
`<ul>`	Неупорядоченный (маркированный) список:`• раз`; `• два`
`<ol>`	Упорядоченный список: `1. раз`; `2. два`
`<li>`	Элемент списка:`<li>раз</li>` `<li>два</li>`

Интересный факт

HTML не требует точек с запятой, фигурных скобок и вообще почти ничего. Сделайте пустую страницу, наберите любой текст – всё отобразится, а некоторые части исправит сам браузер – в этом и проявляется гибкость языка.

Ссылки и изображения

<a> - Гипертекстовая ссылка (гиперссылка) – текст, который позволяет при клике перейти по ссылке, указанной в атрибуте. Она будет выведена по умолчанию как подчёркнутый текст.

Сама ссылка будет скрыта, но отображаться будет в виде текста, который называется анкор (anchor) – потому этот тег и называется «а». Пример ссылки:

<a href="ссылка">анкор</a>

У тега <a> есть атрибуты:

charset – кодировка символов документа, на который ведёт ссылка;
coords – координаты ссылки в карте изображений;
download – документ по ссылке будет загружаться;
href – ссылка (URL страницы);
hreflang – язык документа по ссылке;
media – устройство вывода документа по ссылке;
name – имя анкора;
rel/rev – отношение с документом;
shape – форма ссылки в карте изображений;
target – где открывать документ по ссылке;
type – медиа тип документа по ссылке.

На практике, конечно, для <a>, используют в основном только href атрибут, так что на текущий момент достаточно запомнить лишь его – он обязательный.

Другой тег, похожий на <a> - <img>.

<img> - изображение, которое нужно отобразить на странице, и имеет атрибуты:

align – горизонтальное выравнивание содержимого;
alt – альтернативный текст (отображается, если элемент недоступен);
border – толщина границы (рамки) элемента;
height – высота изображения;
hspace – величина отступов слева и справа;
longdesc – гиперссылка на подробное описание изображения;
src – URL изображения;
vspace – величина отступов сверху и снизу от изображения;
width – ширина изображения.

Как и href у тега <a>, для <img> атрибут src – путь к картинке, обязательный атрибут.

Формы и айфреймы

Формы - <form> нужны для создания фрагмента страницы, в которой будет выполняться ввод данных – логины, поиск, опросы. Попробуйте добавить в нашу страницу перед <footer> следующий фрагмент:

<form action="/submit" method="POST">
  <label>Имя:</label>
  <input type="text" name="username" placeholder="Введите имя">
  <input type="submit" value="Отправить">
</form>

После обновления мы увидим:

Здесь:

<form> - сама форма;
- action - действие, к примеру, куда отправлять данные (/submit в нашем случае, разумеется никуда не отправится – обязательный атрибут;
- method – метод HTTP-запроса (GET или POST, допустим);
<input> - поле для ввода;
- type – тип, к примеру, text, password, email;
- placeholder – подсказка в поле.

Также, элемент формы может содержать теги <textarea>, <button>, <select>, <option>, <optgroup>, <fieldset>, <label>.

<input> бывает нескольких типов, (type):

text – стандартное текстовое поле, можно добавить атрибут value, который будет содержать текст по умолчанию;
password – текстовое поле, но вводимые символы будут скрыты;
checkbox – поле флажков (чекбоксов), или «галочек», которые можно включить или выключить – добавляется атрибут checked, который задаёт начальное состояние – включен или выключен (checked/unchecked);
radio – переключатели (radiobuttons), которые работают по принципу checked/unchecked, но имеет два объекта, где выбирается или первый, или второй;
file – поле загрузки файла;
submit – кнопка отправки данных;
image – изображение вместо кнопки отправки, потребуется дополнительный атрибут src;
button – кнопка;
reset – кнопка сброса значений по умолчанию;
hidden – скрытое поле (скрытое от пользователя).

Кроме форм, можно встроить также «айфрейм» при помощи тега <iframe>, который позволяет встроить на другую страницу видео или карту. К примеру, на сервисе ВК Видео (Вконтакте) можно скопировать код для вставки, и напрямую вставить в код своей страницы.

<iframe> использует атрибуты:

src – ссылку на ресурс;
width / height – размеры областы (ширина и высота);
title – заголовок.

Так, к примеру, я могу добавить на свою страницу видео с котом:

Купились? Но так можно. Поверьте на слово :)

Айфрейм позволяет встроить виджеты на свою страницу, но при этом виджет становится зависимым от доступности ресурса по ссылке в src – если сервис, к примеру, будет заблокирован в стране просмотра, или недоступен – то он не будет отображаться на странице.

Таблицы

Таблицы <table> используются для сетки данных, когда нужно разделить всё на строки, таблицы и ячейки:

<table border="1">
  <tr>
    <th>Имя</th>
    <th>Возраст</th>
  </tr>
  <tr>
    <td>Анна</td>
    <td>25</td>
  </tr>
</table>

Мы увидим простую таблицу:

Имя	Возраст
Анна	25

Здесь:

<table> - таблица, border – атрибут для границ;
<tr> - строка таблицы;
<th> - заголовок колонки (столбца), по умолчанию жирный;
<td> - ячейка с данными.

Работа с тегами и события

Сейчас мы рассмотрим некоторые новые теги, а также изучим особенности работы с ними.

В HTML, как и в других языках, есть комментарии – текст внутри кода, который игнорируется браузером и нужен для разработчиков, «читающих код». Если вы работали хоть раз с кодом с ИИ, то замечали, как он комментирует чуть ли не каждый шаг. Синтаксис представляет собой открывающий тег . Всё, что указано между открывающим и закрывающим, не будет отображено на странице. Комментарии нужны для пояснений к коду, временного отключения сомнительного кода и разметки секций. Их нельзя вкладывать друг в друга, они не работают внутри тегов и содержимое комментариев видно в исходном коде страницы на стороне клиента, так что – лучше не баловаться.

<!-– это комментарий -->

<span> - тег для группировки строчных элементов и задания им определенных атрибутов, к примеру, если посреди текста нужно <span style="color:blue;font-weight:bold">синий</span> текст.
<div> - тег для выделения раздела или блока кода. Он нужен особенно в случаях, когда для определённой части кода используется особый CSS-стиль, к примеру, нужно определить, что есть вкладка, а что – контент вкладки.
<meta> - метаданные о HTML-документе, которые находятся внутри тега <head> - они используются для указания информационного набора общих сведений о странице.

То есть, <div> и <span> это «коробки» для структуры и текста, а <meta> - служебная информация о странице.

Для того, чтобы вместо простого текста была именно кнопка (специальный тип элемента), используется тег <button> - просто кликабельный и активный элемент, который позволяет обрабатывать события. К примеру, кнопка «Войти» на форме авторизации, или «Перейти» для перехода по ссылке (по аналогии с гиперссылкой). Кнопка может работать как тег <a>, а может обрабатывать событие.

В HTML есть такое понятие, как события – когда что-то происходит на странице с элементом:

onblur – когда элемент формы теряет фокус;
onchange – при изменениях в элементе;
onclick – клик мышью (левой кнопкой мыши);
ondblclick – двойной клик мышью;
onfocus – когда элемент получает фокус;
onkeydown – при нажатии клавиши;
onkeypress – при нажатии и отпускании клавиши;
onkeyup – при отпускании клавиши;
onload – когда загружены элементы (допустим в теге body);
onmousedown – при нажатии на кнопку мыши;
onmousemove – при движении указателя мыши;
onmouseout – при покидания указателя мыши района элемента;
onmouseover – при попадании указателя мыши в район элемента;
onmouseup – при отпускании кнопки мыши;
onreset – при сбросе элементов;
onsubmit – при отправке данных;
onunload – при закрытии страницы (в теге body).

При наступлении событий можно указать в значении такого атрибута ссылку на файл скрипта или название функции скрипта, которая будет выполняться. Эти функции пишутся на языке JavaScript и могут как быть включены в документ, так и выведены в отдельный файл.

Пример:

<button onclick="/* скрипт или ссылка на него */">Текст кнопки</button>

Скрипт, встроенный в страницу, содержится как вложенный контент в элементе <script>. У тега <script> тоже есть атрибуты:

async – асинхронный режим работы скрипта;
charset – кодировка символов скрипта;
defer – отложенный режим запуска, до окончания загрузки страницы;
src – URL файла скрипта (для внешнего);
type – медиа-тип скрипта.

Но, для случаев, когда в браузере отключено отображение скриптов, или работает старый браузер, можно добавить резервный тег <noscript>, который выведет текст на случай, если скрипты отключены. Но JavaScript мы изучим чуть позже, ведь там уже идёт работа на языке программирования, а не разметки.

Модальные и диалоговые окна

Тег <dialog> создаёт всплывающее окно или диалог. По умолчанию не показывается на странице.

Может открываться в двух режимах:

Всплывающее окно — не блокирует взаимодействие со страницей.
Модальное окно — откроется поверх страницы, имеет фоновое затемнение, остальной контент не доступен для взаимодействия.

Как пишется

Парный тег <dialog></dialog>, внутри которого находится содержимое всплывающего окна. У <dialog> нельзя использовать атрибут tabindex.

<dialog>
  Привет, мир!
</dialog>

У модального окна обязательно должно быть имя — его краткое название. Благодаря этому пользователи вспомогательных технологий знают, что это за элемент и какое у него содержимое.

Имя окну можно добавить двумя способами:

aria-label,
aria-labelledby.

aria-label добавляет имя, о котором знают только пользователи скринридеров.

<dialog aria-label="Приветствие">
  Привет, мир!
</dialog>

aria-labelledby связывает <dialog> с видимым всем именем.

<dialog aria-labelledby="dialog-name">
  <h3 id="dialog-name">
    Привет, мир!
  </h3>
  <p>Вы не ждали, а вот он я.</p>
</dialog>

Как открыть

Как и у элемента <details>, по умолчанию содержимое окна скрыто от пользователя, но его можно отобразить через атрибут open.

<dialog open>
  Я виден. Привет! 👋
</dialog>

<dialog>
  Я скрыт от пользователя 🥷
</dialog>

Также окно можно открыть с помощью JavaScript-методов:

show() — добавляет атрибуты open и aria-modal="false".
showModal() — открывает в режиме «модального окна». Добавляет атрибуты open и aria-modal="true". Появляется подложка в виде псевдоэлемента ::backdrop, который можно стилизовать.

<button type="button" onclick="window.myDialog.show()">
  Просто открыть
</button>
<button type="button" onclick="window.myDialog.showModal()">
  Открыть как модалку
</button>
<dialog id="myDialog">🖖 Живи долго и процветай!</dialog>

Как закрыть

Закрыть диалог можно двумя основными способами:

Из JavaScript с помощью метода close().
Из HTML по событию submit (например, по нажатию кнопки <button type="submit">), если в <dialog> есть тег <form> с атрибутом method="dialog".

<dialog open id="closeMe" aria-labelledby="heading">
  <h2 id="heading">Закрой меня! 🙏</h2>
  <p>Результат этих кнопок одинаковый.</p>

  <button type="button" onclick="window.closeMe.close()">
    Закрыть с помощью JavaScript
  </button>

  <form method="dialog">
    <button>
      Закрыть с помощью формы
    </button>
  </form>
</dialog>

Атрибут `closedby`

Атрибут closedby — это экспериментальный атрибут, который автоматически появляется у тега <dialog> после его закрытия. Он показывает, какое конкретное пользовательское действие или системный жест привёл к закрытию диалога. Это может быть:

нажатие клавиши Esc,
клик вне области диалога,
свайп назад на Android (например, при включённом TalkBack),
жест закрытия в VoiceOver на iOS,
или даже команда с внешнего контроллера.

Атрибут устанавливается самим браузером и учитывает нативные сценарии взаимодействия, встроенные в пользовательский агент и операционную систему. Это делает closedby особенно полезным при разработке доступных и адаптивных модальных окон.

Этот атрибут на данный момент имеет ограниченную поддержку.

Возвращаемое значение

Если кнопкам в форме задать value, то при закрытии диалога это значение будет присваиваться dialog.returnValue.

<form class="options" method="dialog">
  <button class="button button--dark" value="debug">
    Дави его!
  </button>
  <button class="button button--light" value="reproduction">
    Каждая жизнь священна
  </button>
</form>

В JavaScript можно обработать результат:

if (dialog.returnValue === "debug") {
  bugs.innerText = bugs.innerText.substring(0, bugs.innerText.length - 2)
} else {
  bugs.innerText += "🐞"
}

Как понять

Долгое время в HTML не существовало тега для создания всплывающих окон. Если такая задача возникала, то использовались либо самописные решения для красивых попапов, либо JavaScript-методы alert(), prompt() и confirm(), если красота была не важна.

Тег <dialog> появился как альтернатива. Хорошее диалоговое окно — это не просто логика «Показать» и «Скрыть». В <dialog> реализовано то, о чём часто забывают:

Для вспомогательных технологий <dialog> — аналог role="dialog". Если окно открыто в режиме модального, то и аналог aria-modal="true". Также у тега есть aria-live="assertive", поэтому скринридеры сразу же зачитывают его содержимое.
Модальные диалоги закрываются по нажатию на Esc.
У модального диалога при открытии появляется «ловушка фокуса»: для клавиатурной навигации доступны только интерактивные элементы только текущего диалога.
Браузер запоминает какой элемент был в фокусе до открытия окна и после закрытия окна снова переводит его в фокус.

Вся эта логика реализована в самом браузере «из коробки». А значит пользователю не отправляется лишний трафик.

Подсказки

Google Chrome при закрытии модального окна клавишей Esc ставит предыдущий элемент не просто в :focus, а в :focus-visible. Подразумевая, что пользователь перешёл на клавиатурную навигацию.
Если нужно узнать, кто закрыл окно, воспользуйтесь атрибутом closedby. Он появится у тега <dialog> после закрытия и будет содержать id кнопки или другого интерактивного элемента, вызвавшего закрытие.
По нажатию Esc сначала запускается событие cancel, а затем close. Это может быть полезно, если мы хотим отгородить пользователя от случайного нажатия клавиши, сначала предупредив, что изменённые данные не сохранятся, и только при повторном нажатии закрывать окно.
Контент <dialog> по умолчанию скрыт с помощью display: none. Можно переписать это поведение в стилях и анимировать открытие и закрытие. Намного легче, чем аналогичная задача в <details>, например.
Модальные окна «ускользают» от контекста: даже если в HTML-разметке после модального окна указан тег <div> с z-index: 99999, то модальное окно всё равно отобразится поверх этого <div>. Или если родитель наклонён с помощью skew(), то дочернее модальное окно всё равно откроется без наклона.

Семантические элементы

Современный HTML предоставляет набор семантических тегов, которые описывают смысл содержимого, а не только его внешний вид. Такие элементы делают структуру документа понятной как для браузеров, так и для поисковых систем, скринридеров и других инструментов.

Тег	Назначение
`<header>`	Вводная часть документа или секции: логотип, навигация, заголовок
`<footer>`	Завершающая часть документа или секции: авторские права, контакты, ссылки
`<main>`	Основное содержимое страницы, уникальное и не повторяющееся в других частях
`<section>`	Тематическая группа контента, обычно с заголовком
`<article>`	Самодостаточный блок информации, который можно распространять отдельно (например, новость, пост, комментарий)
`<aside>`	Дополнительный контент, косвенно связанный с основным (реклама, боковая панель, цитаты)
`<nav>`	Блок навигационных ссылок
`<time>`	Представление даты или времени в машиночитаемом формате (`datetime`)
`<data>`	Контент с машиночитаемым значением, отличным от отображаемого текста
`<mark>`	Выделение фрагмента текста, например, при поиске
`<strong>`	Текст высокой важности (логическое выделение, не просто жирный шрифт)
`<em>`	Акцентированный текст (логический курсив, передающий интонацию)
`<cite>`	Название произведения (книги, фильма, статьи)
`<var>`	Переменная в математическом выражении или программном коде
`<dfn>`	Определение термина
`<samp>`	Пример вывода программы
`<abbr>`	Аббревиатура или акроним
`<kbd>`	Обозначение пользовательского ввода с клавиатуры

Элемент <hgroup> ранее использовался для группировки заголовков (<h1>–<h6>), но в современных спецификациях считается устаревшим и не рекомендуется к применению.

Мультимедиа и встраивание

HTML позволяет встраивать разнообразные типы медиаконтента:

<audio> — воспроизведение звука.
<video> — воспроизведение видео.
<source> — указание альтернативных источников для <audio> и <video>, позволяющее поддерживать разные форматы.
<track> — добавление субтитров, описаний или глав к видео/аудио.
<embed> — встраивание внешнего контента (например, Flash, PDF).
<object> — универсальный контейнер для встраивания мультимедиа или плагинов.
<canvas> — область для рисования графики с помощью JavaScript.

Элементы <audio> и <video> поддерживают атрибут controls, который отображает стандартные элементы управления (плей, пауза, громкость).

Изображения и графика

Тег <img> предназначен для отображения растровых изображений. Обязательный атрибут — src. Рекомендуемый атрибут — alt, содержащий текстовое описание изображения для случаев, когда изображение недоступно или используется скринридером.

Для группировки изображения с подписью применяется пара тегов:

<figure> — контейнер для изображения, диаграммы, кода и т.п.
<figcaption> — подпись к содержимому <figure>.

Элемент <picture> позволяет задавать несколько вариантов изображения для разных условий (размер экрана, плотность пикселей). Внутри <picture> используются теги <source> с атрибутами media или type.

SVG-графика может быть встроена прямо в HTML с помощью тега <svg>. Также возможна работа с SVG-спрайтами — объединёнными файлами иконок, где нужная иконка вызывается через <use>.

Интерактивные компоненты

Помимо форм и кнопок, HTML предлагает встроенные интерактивные элементы:

<details> и <summary> — раскрывающийся блок с дополнительной информацией. <summary> служит заголовком, клик по которому открывает или закрывает содержимое.
<meter> — индикатор значения в известном диапазоне (например, уровень заряда).
<progress> — индикатор выполнения задачи (например, загрузка файла).
<dialog> — модальное или немодальное диалоговое окно (подробно описано выше).

Popover API — новая функциональность, позволяющая создавать всплывающие панели без JavaScript. Для этого используется глобальный атрибут popover и методы showPopover() / hidePopover().

Глобальные атрибуты

Глобальные атрибуты применимы ко всем HTML-элементам:

class — назначение CSS-класса.
id — уникальный идентификатор элемента.
style — встроенные CSS-правила.
title — всплывающая подсказка при наведении.
hidden — скрытие элемента без удаления из DOM.
inert — деактивация всех взаимодействий с элементом и его потомками.
tabindex — управление порядком перехода по элементам с клавиатуры.
autofocus — автоматическая установка фокуса при загрузке страницы.
dir — направление текста (ltr, rtl, auto).
enterkeyhint — подсказка на виртуальной клавиатуре (например, «Отправить», «Готово»).
data-* — пользовательские данные, доступные через JavaScript.

Атрибут data-* особенно полезен для хранения служебной информации, связанной с элементом, без изменения его визуального представления.

Интеграция с другими языками

HTML-документ может включать стили и скрипты:

<style> — встроенные CSS-правила.
<script> — встроенный или внешний JavaScript-код.
- Атрибут defer откладывает выполнение скрипта до полной загрузки DOM.
- Атрибут async загружает и выполняет скрипт асинхронно, не блокируя парсинг страницы.
- Атрибут crossorigin управляет CORS-запросами при загрузке внешних ресурсов.
<noscript> — резервный контент, отображаемый, если скрипты отключены.
<template> — невидимый фрагмент HTML, предназначенный для клонирования и вставки через JavaScript.

Поисковая оптимизация и метаданные

Метаданные размещаются внутри <head> и описывают документ для браузеров, поисковиков и социальных сетей:

<meta charset="UTF-8"> — указание кодировки.
<meta name="viewport" content="width=device-width, initial-scale=1"> — адаптация под мобильные устройства.
<meta name="description" content="..."> — краткое описание страницы.
<link rel="canonical" href="..."> — указание канонического URL.
Open Graph и Twitter Card — метатеги для корректного отображения ссылок в соцсетях.

Хотя тег <noindex> иногда упоминается в контексте запрета индексации, он не является частью официального стандарта HTML. Для управления индексацией рекомендуется использовать HTTP-заголовки или robots-метатег.

Устаревшие и нестандартные элементы

Некоторые теги, такие как <font>, <center>, <strike>, <frame>, больше не поддерживаются в современном HTML. Их функциональность заменяется CSS или семантическими аналогами. Использование устаревших элементов снижает доступность, производительность и поддерживаемость кода.

Форматирование текста​

Ссылки и изображения​

Формы и айфреймы​

Таблицы​

Работа с тегами и события​

Модальные и диалоговые окна​

Как пишется​

Как открыть​

Как закрыть​

Атрибут closedby​

Возвращаемое значение​

Как понять​

Подсказки​

Семантические элементы​

Мультимедиа и встраивание​

Изображения и графика​

Интерактивные компоненты​

Глобальные атрибуты​

Интеграция с другими языками​

Поисковая оптимизация и метаданные​

Устаревшие и нестандартные элементы​